<template>
	<view class="box">
		<view class="content" v-if="info.totalGainIntegral==0">
			<!-- 大展示 -->
			<view class="bg">
				<view class="num bold">{{info.integral}}</view>
				<view class="f24">可使用积分</view>
			</view>
			<view class="list">
				<!-- 中间盒子 -->
				<view class="card f-w">
					<view>
						<view class="bold f36">{{info.integral}}</view>
						<view class="f26 c999">未使用</view>
					</view>
					<view>
						<view class="bold f36">{{info.deductionIntegral}}</view>
						<view class="f26 c999">已使用</view>
					</view>
				</view>
				<!-- 积分明细 -->
				<view class="list2">
					<view class="title f-w">
						<view class="tag"></view>
						<view class="f32">积分明细</view>
					</view>
					<!-- 列表 -->
					<view class="demo" v-for="(item,index) in list" :key="index">
						<view class="one fw-bt f28 bold">
							<view class="f-w">
								<view>{{item.title}}{{item.mark?item.mark:''}}</view>

							</view>
							<view class="bold" :class="item.type==1?'c1':'c2'">{{item.pm==1?'+':'1'}}{{item.number}}
							</view>
						</view>
						<view class="two f24 c999">{{item.create_time}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="none" v-else>
			<view class="none-img f-w">
				<image src="https://jw.xzsw2021.com/static/big/icon_220@2x.png" mode=""></image>
			</view>
			<view class="none-desc f30 c666 tr">
				您还没有任何积分
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				info: {},
				page: 1,
				list: []
			}
		},
		onLoad() {

		},
		onShow() {
			if (this.points) {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#2BCBA4',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				})
			}
			this.getinfo()
			this.page = 1
			this.list = []
			this.getlist(this.page)
		},
		onReachBottom() {

			this.getlist(this.page + 1)
		},

		methods: {

			getinfo() {
				// user/integral/info
				this.$request('user/integral/info', {}, 'GET').then(res => {
					this.info = res.data

				})
			},
			getlist(e) {
				let data = {
					page: e,
					limit: 10,
				}
				this.$request('user/integral/lst', data, 'GET').then(res => {
					if (res.status == 200) {
						if (e == 1) {
							this.list = res.data.list
						} else {
							if (res.data.list.length == 0) {
								uni.showToast({
									title: "暂无更多",
									icon: "none"
								})
								return
							}
							let list = this.list
							list = [...list, ...res.data.list]
							this.list = list
							this.page = e
						}

					}


				})
			},

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		.none {
			.none-img {
				margin: 300rpx auto 78rpx;
				width: 392rpx;
				height: 298rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.content {
			.bg {
				width: 750rpx;
				height: 340rpx;
				background: linear-gradient(179deg, #2BCCA5, #22B591);
				text-align: center;
				color: #fff;
				overflow: hidden;

				.num {
					margin: 40rpx 0 0;
					font-size: 80rpx;
				}
			}

			.list {
				.card {
					justify-content: space-around;
					margin: -80rpx auto 0;
					width: 690rpx;
					height: 160rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 4rpx 54rpx 0rpx rgba(199, 200, 200, 0.4);
					border-radius: 20rpx;
					text-align: center;

					.bold {
						margin-bottom: 2rpx;
					}
				}

				.list2 {
					margin-top: 50rpx;
					padding: 30rpx;
					height: 800rpx;

					.title {
						margin-bottom: 10rpx;

						.tag {
							margin-right: 15rpx;
							width: 6rpx;
							height: 32rpx;
							background: linear-gradient(179deg, #2BCCA5, #22B591);
							border-radius: 3rpx;
						}
					}

					.demo {
						padding: 28rpx 0;
						border-bottom: 1rpx solid #eee;

						.no {
							margin-left: 10rpx;
						}

						.c1 {
							color: #109C7A;
						}

						.c2 {
							color: #F83535;
						}

						.two {
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
</style>
